<template>
    <div class="tableList">
        <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400,padding:'5px 0'}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" :row-key="getRowKeys" @selection-change="handleSelectionChange"
            ref="tabList" :key="toUpdateTableKey">
            <el-table-column type="selection" width="55" :reserve-selection='true'>
            </el-table-column>
            <el-table-column v-for="(item,index) in tableGroup" :key="item.label" :label="item.name"
                :min-width="item.width" show-overflow-tooltip>
                <template slot-scope="scope">
                    <code v-if="item.label == 'parentProductCode' || item.label == 'childProductCode'">
                        <span style="color:#02b980">{{scope.row[item.label]}}</span>
                    </code>
                    <code v-else>
                        {{scope.row[item.label]}}
                    </code>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                        @click="edit(scope.row.id)">编辑
                    </el-button>
                    <el-popconfirm placement='top' confirm-button-text='确认' @confirm="bomDelFn({ids:scope.row.id})"
                        title="确认删除物料？删除后不可恢复">
                        <el-button slot="reference" type="text" size="small" style="margin-left:10px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size='100'></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="searchForm.limit" layout="total,prev, pager, next,sizes,jumper"
            :total="total" background>
        </el-pagination>
    </div>
</template>

<script>
    import {
        bomList,
        bomDel
    } from '@/api/baseController'
    export default {
        data() {
            return {
                tableData: [],
                toUpdateTableKey: false,
                loading: false,
                multipleSelection: [],
                total: 0
            }
        },
        props: {
            tableGroup: {
                type: Array,
                default: () => []
            },
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        watch:{
            multipleSelection(selection){
                if(selection.length === 0) this.$refs.tabList.clearSelection()
            }
        },
        methods: {
            //清单列表
            getBomList: async function (data) {
                this.loading = true
                const res = await bomList(data)
                if (res.code == 200) {
                    res.data.forEach((item, index) => {
                        item.index = (this.searchForm.page - 1) * 10 + (index + 1)
                    })
                    this.tableData = res.data
                    this.total = res.count
                }
                this.loading = false
                this.$emit('getTotal', res.count)
            },
            //清单删除
            bomDelFn: async function(data){
                const {countTableDelLastLinePage} = this.utils
                this.searchForm.page = countTableDelLastLinePage(this.total,this.searchForm.page,this.searchForm.limit)
                const res = await bomDel(data)
                if(res.code === 200) {
                    this.handleCheckState(data.ids)
                    this.getBomList(this.searchForm).then(()=>{
                        this.utils.showMsg('删除成功', 'success')
                    })
                }
            },
            //删除清单重置勾选状态
            handleCheckState(ids){
                let toggleArr = ids.toString().split(',')
                toggleArr.forEach(i => {
                    let toggleIndex = this.multipleSelection.findIndex(k => i == k.id)
                    toggleIndex != -1 && this.multipleSelection.splice(toggleIndex,1)
                })
            },
            getRowKeys(row) {
                return row.id
            },
            handleSelectionChange(selection) {
                this.multipleSelection = selection
                this.$emit('getCheckedId', selection.map(i => i.id).toString())
            },
            //编辑
            edit(id) {
                this.$router.push({
                    path: '/basicData/materials/edit',
                    query: {id}
                })
            },
            batchDel(ids){
                this.$confirm('删除后数据无法恢复，确定删除吗？', '删除清单', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'messagebox',
                    confirmButtonClass: 'dangerBtn',
                    type: 'warning'
                }).then(() => {
                    this.bomDelFn({ids})
                }).catch(() => {})
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getBomList(this.searchForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getBomList(this.searchForm)
            },
            updateTable() {
                this.toUpdateTableKey = !this.toUpdateTableKey
            }
        },
        beforeUpdate() {
            this.$nextTick(() => {
                this.$refs.tabList.doLayout()
            })
        }
    }
</script>

<style lang="less" scoped>
    .tableList {
        padding: 0 20px;

        code {
            font-family: sans-serif;
        }
    }
</style>